<template>
	<view class="container">
		<view class="iner">基本信息</view>
		<view class="returnGoods">
			<view class="headerNumber">
				<view style="font-size: 24rpx;">出库类型</view>
				<view style="font-size: 26rpx;color: #999999 ;">成品出库</view>
			</view>
			<view style="width: 93%;height: 1rpx;"></view>
			<view class="headerNumber" @click="handeleScan">
				<view style="font-size: 24rpx;">货品</view>
				<view style="font-size: 26rpx;color: #999999 ;">
					<image style="width: 40rpx;height: 40rpx;" src="/static/work/scan.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="iners">
			
		</view>
		<view class="material" v-if="materials.length>0">
			<!-- 主要原料 -->
			<view class="picking" v-for="(item,index) in materials" :key="index">
				<view class="pickingTitles" style="margin-bottom: 20rpx;">
					<view class="flex">
						<span>货品{{index+1}}：</span>
						<span style="color: #999999 ;">{{item.name}}</span>
					</view>
					<view style="display: flex;align-items: center;">
						<image @click="handeleRemoveGoods(index)" style="width: 34rpx;height: 34rpx;" src="/static/work/remove.png"
							mode=""></image>
						
					</view>
					
				</view>
				<view v-for="(item1,index1) in item.chile" :key="index1">
					<view class="selectBlock" >
						<view class="select" @click="handeleLibrary(0,index)">
							<view v-if="item1.name" class="lib">{{item1.name}}</view>
							<view v-else style="color: #999999 ;">选货位</view>
							<image style="width: 16rpx;height: 16rpx;" src="/static/work/bottom.png" mode=""/>
						</view>
						<view class="select" @click="handeleShow(0,index)">
							<view v-if="item1.title" class="lib">{{item1.title}}</view>
							<view style="color: #999999;" v-else>选批次</view>
							<image style="width: 16rpx;height: 16rpx;" src="/static/work/bottom.png" mode=""/>
						</view>
						<view class="selectActive">
							<input type="number" style="font-size: 24rpx;display: flex;align-items: center;" v-model="item1.num"
								placeholder-style="font-size:24rpx;" placeholder="请输入数量">
							<view style="font-size: 24rpx;">kg</view>
						</view>
						<view class="selectImage" v-if="item.chile.length>1"  @click="handeleRemoveMaterials(index,index1)">
							<image style="width: 34rpx;height: 34rpx;" src="/static/work/reduct.png" mode=""/>
						</view>
					</view>
				</view>
				<view @click="handeleAddMaterials(index)" style="display: flex;align-items: center;width: 100%;height: 80rpx;justify-content: center;">
					<image  style="width: 34rpx;height: 34rpx;" src="/static/work/add.png"
						mode=""></image>
					<view style="font-size: 24rpx;color: #177A77 ;margin-left: 15rpx;">增加货位</view>
				</view>
				
			</view>
		</view>
		
		<view class="submit">
			<u-button :loading='loading' :disabled="disabled" :custom-style="customStyleBtn1" @click="submit">确认出库</u-button>
		</view>
		<!-- 仓库 -->
		<u-picker :show="libraryShow" ref="uPicker" @cancel="libraryShow=false" :columns="columnslibrary" @confirm="confirm" @change="changeHandler"></u-picker>
		<!-- 批次 -->
		<u-picker :show="show" :columns="columns" keyName="label" @confirm="handelConfirmPC" @cancel="show=false"></u-picker>
		
	</view>
</template>

<script>
	import {
		constructGroups
	} from '../../../utils/common.js'
	export default {
		data() {
			return {
				customStyleBtn1: {
					width: '690rpx',
					height: '90rpx',
					borderRadius: '45rpx',
					background: "linear-gradient(0deg, #177A77, #4B9C6D)",
					fontSize: '28rpx',
					fontWeight: 400,
					color: '#ffffff',
					border: 'none'
				},
				orders:[
					[{
						label: 'CG20250201001',
						id: 2021
									
					}, {
						label: 'CG20250201002',
						id: 804
					},{
						label: 'CG20250201003',
						id: 802
					},{
						label: 'CG20250201004',
						id: 801
					}
					]
				],//采购单号
				materials: [],//商品
				columnslibrary: [],//仓库一级数据
				columnData: [],//仓库二级数据
				arr:[ //测试的假数据
					{id: 1,name: '动物'},
					{parentId: 1,name: '鬣狗'},
					{parentId: 1,name: '大象'},
					{parentId: 1,name: '猴子'},
					{parentId: 1,name: '卡皮巴拉'},
					{id:2,name:'颜色'},
					{parentId: 2,name: '赤色'},
					{parentId: 2,name: '橙色'},
					{parentId: 2,name: '黄色'},
					{parentId: 2,name: '绿色'},
					{id:3,name:'时间'},
					{parentId: 3,name: '上午'},
					{parentId: 3,name: '中午'},
					{parentId: 3,name: '下午'},
					{id:4,name:'哈西大仓库'},
					{parentId: 4,name: '大货位1'},
					{parentId: 4,name: '大货位2'},
					{parentId: 4,name: '大货位3'},
				],
				disabled:true,//按钮
				loading: false,//按钮
				libraryShow:false, //控制选择仓库弹窗
				hostIndex:0,//主选择ID
				assistIndex:0,//辅选择ID
				index:0,//选择主还是辅
				columns: [ //批次
					[{
						label: '雪月夜',
						id: 2021

					}, {
						label: '冷夜雨',
						id: 804
					}]
				],
				goods: [ //商品
					[{
						label: '土豆',
						id: 2021
				
					}, {
						label: '黄瓜',
						id: 804
					},{
						label: '豆角',
						id: 802
					},{
						label: '白菜',
						id: 801
					}
					]
				],
				show: false,
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			// 获取数据
			getData(){
				let objs = constructGroups(this.arr)
				this.columnslibrary = objs.columns
				this.columnData = objs.columnData
			},
		
			// 扫一扫获取出库商品
			handeleScan(){
				// 只允许通过相机扫码
				uni.scanCode({
					scanType:['qrCode'],//barCode 一维码，qrCode 二维码，datamatrix Data Matrix 码，pdf417 PDF417 条码
					onlyFromCamera: true,
					success: res=> {
						uni.showLoading({
							title:'加载中...'
						})
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						setTimeout(()=>{
							uni.hideLoading()
						},2000)
					}
				});
			},
			
			// 确认领料
			submit() {
				this.loading = true
			},
			// 批次确定
			handelConfirmPC(e){
				
				this.materials[this.assistIndex].title = e.value[0].label
				
				
				this.show = false
			},
			
			// 选择仓库确定
			confirm(e){
				this.materials[this.hostIndex].name = e.value[0]+'/'+e.value[1]
				this.libraryShow = false
			},
			// 选择主仓库，或辅料仓库
			handeleLibrary(index,hostIndex){
				this.index = index
				this.hostIndex = hostIndex
				this.libraryShow = true
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 点击批次弹窗
			handeleShow(index,assistIndex){
				this.assistIndex = assistIndex 
				this.index = index
				this.show = true
			},
			handeleRemoveGoods(index){
				uni.showModal({
					title: '提示',
					content: '确认删除此条信息？',
					success: res => {
						if (res.confirm) {
							this.materials.splice(index,1)
						}
					}
				});
			
			},
			// 增加主原料
			handeleAddMaterials(index) {
				this.materials[index].chile.push(
					{
					id:0 ,
					name: '',
					nameID: 0,
					title: '',
					num:''	
					}
				)
			},
			// 删除主原料
			handeleRemoveMaterials(index,index1) {
				uni.showModal({
					title: '提示',
					content: '确认删除此条信息？',
					success: res => {
						if (res.confirm) {
							this.materials[index].chile.splice(index1,1)
						}
					}
				});
			},
			// 子原料1
			handeleAddOne() {
				this.auxiliaryMaterials.push({
					id: '123',
					id: '123',
					id: '123',
				})
			},
			// 删除辅料
			handeleRemoveOne(index) {
				uni.showModal({
					title: '提示',
					content: '确认删除此条信息？',
					success: res => {
						if (res.confirm) {
							this.auxiliaryMaterials.splice(index, 1)
						}
					}
				});
			}
		}
	}
</script>

<style scoped>
	.pupBlock{
		width: 100%;
		height: 700rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.addGoods{
		margin-top: 20rpx;
		width: 750rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #177A77 ;
		font-size: 26rpx;
	}
	.returnGoods{
		width: 750rpx;
		min-height: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.lib{
		width: 140rpx;
		text-overflow: ellipsis;
		    overflow: hidden;
		    word-break: break-all;
		    white-space: nowrap;
	}
	.selectImage {
		width: 58rpx;
		height: 58rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.selectBlock {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 18rpx;
	}
	
	.select {
		flex: 1;
		height: 60rpx;
		border: 1px solid #EBEBEB;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-right: 19rpx;
		padding: 0rpx 21rpx;
		box-sizing: border-box;
		font-size: 24rpx;
	}
	.selectActive {
		flex: 1;
		height: 60rpx;
		border: 1px solid #EBEBEB;
		display: flex;
		align-items: center;
		padding: 0 21rpx;
		box-sizing: border-box;
	}
	
	.pickingTitles {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.flex {
		display: flex;
		align-items: center;
	}
	
	.pickingTitle {
		font-size: 24rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
	}
	.pickingActive {
		width: 750rpx;
		min-height: 200rpx;
		background-color: #FFFFFF;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}
	.picking {
		width: 750rpx;
		min-height: 200rpx;
		background-color: #FFFFFF;
		padding: 43rpx 30rpx 21rpx 30rpx;
		box-sizing: border-box;
		margin-bottom: 10rpx;
	}
	.submit {
		width: 100%;
		position: relative;
		margin-top: 97rpx;
		margin-bottom: 100rpx;
	}
	.material{
		width: 750rpx;
		min-height: 130rpx;
		padding: 0rpx 29rpx 0rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.iners{
		width: 750rpx;
		height: 21rpx;
		display: flex;
		align-items: center;
		padding: 0 37rpx;
		box-sizing: border-box;
		font-size: 24rpx;
	}
	.headerNumber {
		width: 750rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 27rpx 0 30rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}
	
	.iner {
		width: 750rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 37rpx;
		box-sizing: border-box;
		font-size: 24rpx;
	}
	.container {
		width: 750rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F8F8F8;
	}
	
	page {
		background-color: #F8F8F8;
	}
</style>